<!-- <script lang="ts">
export default {
  data() {
    return { count: 1 }
  },
  methods: {
    add() {
      this.count += 1
    }
  }
}
</script> -->

<script setup lang="ts">
//没有this
import { log } from 'console'

import { ref, reactive } from 'vue'

//如果你要声明响应式的变量,就要用ref| reactive 把变量ref(基本类型变量名)  reactive(引用变量名)

let count = ref(365)
let username = ref('')
let names = reactive(['张三', '李四'])
console.log(count)
console.log(names)

function add() {
  console.log('add')
  count.value++
}

const addNames = () => {
  console.log('addNames')
  names.value.push(username.value)
}
</script>

<template>
  <div>
    <button @click="count++">{{ count }}+1</button> <br />
    <button @click="add">{{ count }}+1</button> <br />

    <hr />
    <input type="text" v-model="username" />
    <button @click="addNames">添加姓名</button> <br />
    <ul>
      <li v-for="name in names">
        {{ name }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
</style> 